<template>
  <div>
    <p v-show="flage">我是第一个元素</p>
    <p v-if="!flage">我是第二个元素</p>
    <button v-on:click="handeleClick">点击</button>
    <input type="text" v-bind:value="inp" @input="handleChange" />
    <div v-html="divInner"></div>
    <div v-text="divInner" ref="mybox"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inp: "",
      flage: false,
      divInner: "<span>66</span>",
    };
  },
  methods: {
    handleChange(e) {
      console.log(e, 123);
      this.inp = e.target.value;
    },
    handeleClick() {
      this.$refs.mybox.innerHTML = this.divInner;
      console.log(this.$refs.mybox.innerHTML, 11);
      console.log(123);
      this.flage = !this.flage;
    },
  },
};
</script>

<style>
</style>